<template>
  <div class="cate">
    <nav-bar class="cater-center"><div slot="center">商品分类</div></nav-bar>

    <scroll class="content1" ref="scroll1" :probe-type="3" :pull-up-load="true">
      <!-- @从该组件为传出到这 :为传入到该组件 -->
      <category-list
        :categories="categories"
        @selectItem="selectItem"
      ></category-list>
    </scroll>

    <!-- <refresh v-show="isShow"></refresh> -->
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contextScroll"
    >
      <category-title
        class="title"
        :subcategories="showSubcategory"
      ></category-title>

      <tab-control
        :titles="['综合', '新品', '销量']"
        @tabClick="tabClick"
        ref="tabControl2"
        class="tab-content"
      ></tab-control>

      <tab-content-detail
        :category-detail="showCategoryDetail"
      ></tab-content-detail>
    </scroll>

    <back-top @backClick="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";
import CategoryList from "./childComps/CategoryList.vue";
import CategoryTitle from "./childComps/CategoryTitle.vue";
import TabControl from "components/content/tabControl/TabControl";
import TabContentDetail from "./childComps/TabContentDetail";

import Scroll from "components/common/scroll/Scroll.vue";

import { backTopMixin, tabControlMixin } from "common/mixin.js";
import { POP, SELL, NEW } from "common/const";
import { debounce } from "common/utils.js";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";

export default {
  name: "Category",
  components: {
    NavBar,
    CategoryList,
    Scroll,
    CategoryTitle,
    TabControl,
    TabContentDetail,
  },
  mixins: [backTopMixin, tabControlMixin],
  data() {
    return {
      categories: [],
      categoryData: {},
      currentIndex: -1,
      isShowBackTop: false,
    };
  },
  created() {
    this._getCategory();
  },

  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 100);

    this.itemImgListener = () => {
      refresh();
    };

    this.$bus.$on("itemImageLoad", this.itemImgListener);
  },

  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {};
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    },
  },

  methods: {
    _getCategory() {
      getCategory().then((res) => {
        this.categories = res.data.category.list;
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }

        this._getSubcategory(0);
      });
    },

    _getSubcategory(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then((res) => {
        this.categoryData[index].subcategories = res.data;
        this.categoryData = { ...this.categoryData };

        this.getCategoryDetail(POP);
        this.getCategoryDetail(SELL);
        this.getCategoryDetail(NEW);
      });
    },

    getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then((res) => {
        // 3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },

    selectItem(index) {
      this._getSubcategory(index);
    },

    contextScroll(position) {
      this.listenShowBackTop(position);
    },
  },

  activated() {
    this.$refs.scroll.refresh();
  },
};
</script>

<style scoped>
.cate {
  height: 100vh;
  background: #fff;
  background: url("../../assets/img/regisetr/login2.jpg");
  background-size: cover;
}
.cater-center {
  background-color: var(--color-tint);
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
}
.content {
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 100px;
  right: 0;
  width: calc(100% - 100px);
}
.content1 {
  overflow: hidden;
  position: absolute;

  top: 44px;
  bottom: 49px;

  left: 0px;
  right: 0;
  width: 100px;
  background: none;
  height: calc(100% - 93px);
}
.tab-content {
  box-shadow: 4px 6px 10px #b7cfd1;
}
</style>
